import React from 'react';
import {withRouter } from 'react-router-dom';
import {inject, observer} from 'mobx-react';
import { Icon, TabBar, Tools} from 'weaver-mobile';
import { DocumentTitle } from "weaver-mobile-page";
const getLabel = Tools.getLabel;

@inject('baseStore')
@withRouter
@observer
class Main extends React.Component {
    componentDidMount() {
        const {baseStore} = this.props;
        const {getHomeFooter} = baseStore;
        getHomeFooter();
    }

    render() {
        const {location:{pathname},baseStore} = this.props;
        const {smallE} = baseStore;

        const selectedKey = this.getKey(pathname);

        const datas = [
            { match: /^\/home/i, title: () => getLabel(513044,"首页") },
            { match: /^\/apply\/false/i, title: () => getLabel(513982,"申请") },
            { match: /^\/smallE/i, title: () => getLabel(514226,'小e') },
            { match: /^\/statistical/i, title: () => getLabel(352,'统计') },
            { match: /^\/application/i, title: () => getLabel(25432,'应用') },
        ];

        const data=[
            { title: getLabel(513044,"首页") , icon:"home-page" , key: "home" },
            { title: getLabel(513982,"申请") , icon:"apply" , key: "apply" },
            //{ title: getLabel(352,'统计') , icon:"tongji" , key: "statistical" },
            { title: getLabel(25432,'应用') , icon:"classified-view" , key: "application" }
        ];
        if(smallE){
            data.push( { title: getLabel(514226,'小e') , icon:"small-e" , key: "smallE" })
        }

        return (
            <div style={{'height':'100%'}}>
                {
                    (pathname == '/home' || pathname == '/apply/false' || pathname == '/application' || pathname == '/statistical') &&
                    <div className="fna-bar">
                        <DocumentTitle data={datas} defaultTitle="" />
                        <TabBar
                            barTintClassName={'fna-bar-tint-color'}
                            //unselectedTintColor='#f00' //未选中的字体颜色
                            // tintColor='#f00' //选中的字体颜色
                            // tabBarPosition="bottom"
                        >
                            {
                                data.map(item=>{
                                    return (
                                        <TabBar.Item
                                            title={item.title}
                                            key={item.key}
                                            icon={<Icon type={item.icon}/>}
                                            selectedIcon={<Icon type={item.icon}/> }
                                            selected={selectedKey === item.key}
                                            onPress = {()=>{this.onPress(item.key)}}
                                        />
                                    )
                                })
                            }
                        </TabBar>
                        
                    </div>
                            
                }
                <div style={{'height':'100%'}}>{this.props.children}</div>
            </div>
            
        );
        
    }

    getKey(path){
        let key = "";
        if( path.indexOf("home") > -1 )  key = "home";
        if( path.indexOf("apply") > -1 )   key = "apply";
        if( path.indexOf("smallE") > -1 )   key = "smallE";
        if( path.indexOf("statistical") > -1 )   key = "statistical";
        if( path.indexOf("application") > -1 )  key = "application";

        return key;
    }  

    onPress = (key) =>{
        if(key == 'smallE'){
            window.open('/mobile/plugin/siri/dist/index.html');
            // window.open('http://192.168.7.216:8080/mobile/plugin/siri/dist/index.html')
        }else if(key == 'apply'){
            this.props.history.push(`/${key}/false`)
        }else {
            this.props.history.push(`/${key}`)
        }
        
    }



}

export default Main;